<h1>@{title}</h1>

<div class="row">
	<div class="col-md-6">
		<div class="content">

			@{if query.paid === '0'}
			<div class="contentwarning">
				<i class="fa fa-warning"></i>@(We didn't receive a payment. <b>Try to pay again</b>.)
			</div>
			@{fi}

			@{if query.paid === '1'}
			<div class="contentsuccess">
				<i class="fa fa-check-circle"></i>@(<b>Thank you</b>, order has been paid.)
			</div>
			@{fi}

			@{if model.isfinished}
			<div class="contentsuccess">
				<i class="fa fa-check-circle"></i>@(Finished)
			</div>
			@{fi}

			<div class="contentbody">
				<div class="help nmb"><i class="fa fa-clock-o"></i>@(Order status:)</div>
				<div class="b red">@{model.status}</div>
			</div>

			@{if model.statushistory && model.statushistory.length > 1}
				<div class="order-historystatus">
				@{foreach m in model.statushistory.reverse()}
					<div><i class="fa fa-clock-o"></i><b>@{m.date.format('@(yyyy-MM-dd HH:mm)')}</b> - @{m.status}</div>
				@{end}
				</div>
			@{fi}

			@{if model.message}
			<div class="contentbody bg-yellow">
				<div class="help mb10"><i class="fa fa-warning"></i>@(Message for you:)</div>
				<div class="b">@{model.message.replace(/\n/g, '<br />')}</div>
			</div>
			@{fi}

			<hr class="nmt nmb" />

			<div class="contentbody">
				<div class="keyvalue">
					<div class="key">@(Customer)</div>
					<div class="value">@{model.firstname} @{model.lastname}</div>
				</div>

				@{if model.iscompany}
				<div class="keyvalue">
					<div class="key">@(Company)</div>
					<div class="value">@{model.company}</div>
					<div class="value silver fs12" style="margin-top:5px">@{model.companyid}<br />@{model.companyvat}</div>
				</div>
				@{fi}

				<div class="keyvalue">
					<div class="key">@(Email address)</div>
					<div class="value">@{model.email}</div>
				</div>

				<div class="keyvalue">
					<div class="key">@(Phone number)</div>
					<div class="value">@{model.phone}</div>
				</div>

				@{if model.note}
				<div class="keyvalue">
					<div class="key">@(Note)</div>
					<div class="value">@{model.note}</div>
				</div>
				@{fi}

				@{if !model.isfinished && !model.ispaid}
					<br />
					<div><button class="button b exec" name="paypal" data-exec="pay"><i class="fa fa-paypal"></i>@(Pay now)</button></div>
					<div class="help">@(You will be redirect to secured <b>PayPal</b> payment page.)</div>
				@{fi}

			</div>
		</div>
		<br />
		<div style="padding:10px">
			<div class="row">
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Number)</div>
						<div class="value">@{model.number}</div>
					</div>
				</div>
				@{if model.ispaid}
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Paid)</div>
						<div class="value green"><i class="fa fa-check-circle"></i>@{model.datepaid.format('yyyy-MM-dd HH:mm')}</div>
					</div>
				</div>
				@{fi}
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Created)</div>
						<div class="value">@{model.datecreated.format('yyyy-MM-dd HH:mm')}</div>
					</div>
				</div>
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Price)</div>
						<div class="value">@{!model.price.currency()}</div>
					</div>
				</div>
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Ordered of items)</div>
						<div class="value">@{model.count}x</div>
					</div>
				</div>
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(Discount)</div>
						<div class="value">@{model.discount}%</div>
					</div>
				</div>
				<div class="col-md-6 m">
					<div class="keyvalue">
						<div class="key">@(IP address)</div>
						<div class="value">@{model.ip}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="content">
			<div class="contentbody bg-yellow">
				<div class="keyvalue m">
					<div class="key"><i class="fa fa-dropbox"></i>@(Delivery)</div>
					<div class="value">@{model.delivery}</div>
				</div>
				<div class="keyvalue m">
					<div class="key"><i class="fa fa-dropbox"></i>@(Payment)</div>
					<div class="value">@{model.payment}@{if model.ispaid}<span class="badge badge-green">@(PAID)</span>@{else}<span class="badge">@(NOT PAID)</span>@{fi}</div>
				</div>
				<div class="keyvalue m">
					<div class="key"><i class="fa fa-at"></i>@(Tracking code)</div>
					<div class="value">@{if model.trackingcode}@{model.trackingcode}@{else}@(Undefined)@{fi}</div>
				</div>
			</div>
			<div class="contentbody">
				<div class="keyvalue m">
					<div class="key"><i class="fa fa-address-book"></i>@(Billing address)</div>
					<div class="value">@{model.billingstreet}<br />@{model.billingzip}<br />@{model.billingcity}<br />@{model.billingcountry}</div>
				</div>
				<div class="keyvalue">
					<div class="key"><i class="fa fa-truck"></i>@(Delivery address)</div>
					<div class="value">@{model.deliveryfirstname} @{model.deliverylastname}<br />@{model.deliverystreet}<br />@{model.deliveryzip}<br />@{model.deliverycity}<br />@{model.deliverycountry}<br />@(Phone:) @{model.deliveryphone}</div>
				</div>
			</div>
		</div>
	</div>
</div>
<br />
<h2>@(Ordered items)</h2>
<table class="table table-bordered bg-white">
	<thead>
		<tr>
			<th>@(Product name)</th>
			<th class="ui-center col-xs-1">@(Count)</th>
			<th class="ui-right col-sm-3 col-xs-4">@(Price)</th>
		</tr>
	</thead>
	<tbody class="orderedproducts">
		@{foreach m in model.items}
		<tr>
			<td>@{m.name}</td>
			<td class="ui-center col-xs-1">@{m.count}</td>
			<td class="ui-right col-sm-3 col-xs-4">@{!(m.count * m.price).currency()}</td>
		</tr>
		@{end}
	</tbody>
	<tfoot>
		<tr class="bg-yellow">
			<td class="b">@(Summarize)</td>
			<td class="b ui-center">@{model.count}</td>
			<td class="b ui-right red">@{!model.price.currency()}</td>
		</tr>
	</tfoot>
</table>

<script>
	function pay(btn) {
		SETTER('loading', 'show');
		location.href = location.pathname + '?payment=' + btn.prop('name');
	}

	// Highlight sizes and colors
	$('.orderedproducts').find('tr').each(function() {
		var el = $(this).find('td:first-child');
		var html = el.html();
		html.substring(0, 1) === '[' && el.html(html.replace(/^\[.*?\]/, n => '<b class="badge badge-blue badge-large">' + n.replace(/\[|\]/g, '') + '</b>'));
	});

</script>